<template>
  <n-config-provider>
    <n-layout>
      <n-layout-header style="padding: 20px; border-bottom: 1px solid #eee">
        <n-menu mode="horizontal" :options="menuOptions"/>
      </n-layout-header>
      <n-layout-content style="padding: 20px">
        <router-view />
      </n-layout-content>
      <n-layout-footer style="padding: 20px; text-align: center">
        © 2024 My App
      </n-layout-footer>
    </n-layout>
  </n-config-provider>
</template>

<script setup>
import { h } from 'vue'
import { NIcon } from 'naive-ui'
import { BookOutline as BookIcon, PersonCircleOutline as PersonIcon } from '@vicons/ionicons5'

const menuOptions = [
  {
    label: () => h(
      'a',
      { onClick: () => router.push('/') },
      'Home'
    ),
    key: 'home',
    icon: () => h(NIcon, null, { default: () => h(BookIcon) })
  },
  {
    label: () => h(
      'a',
      { onClick: () => router.push('/about') },
      'About'
    ),
    key: 'about',
    icon: () => h(NIcon, null, { default: () => h(PersonIcon) })
  }
]

import { useRouter } from 'vue-router'
const router = useRouter()
</script>